<template>
  <div class="sign-in-page h-full w-full">
    <div class="sign-in-content">
      <img class="sign-in-logo" src="../../assets/images/sign-in-logo.png" />
      <div>
        <LoginForm v-if="showLogin" />
        <RegisterForm v-else />
      </div>
    </div>
    <footer class="pb-5">
      <div class="flex justify-center mb-1">
        知乎专栏 · 圆桌 · 发现 · 移动应用 · 联系我们 · 来知乎工作 · 注册机构号 · Investor Relations
      </div>
      <div class="flex justify-center mb-1">
        @ 2023 知乎·京ICP 证 110745 号 · 京ICP备 13052560 号 - 1 ·&nbsp;
        <img src="../../assets/images/publicSecurity.png" class="h-5" alt="" />
        京公网安备 11010802020088 号 · 京网文[2022]2674-081 号 ·
        出版物经营许可证·药品医疗器械网络信息服务备案（京）网药械信息备字（2022）第00334号
      </div>
      <div class="flex justify-center mb-1">
        侵权举报 · 网上有害信息举报专区 · 儿童色情信息举报专区 · 互联网算法推荐举报专区 ·
        违法和不良信息举报：010-82716601 · 举报邮箱：jubao@zhihu.com
      </div>
      <div class="flex justify-center mt-5">
        <img src="../../assets/images/accessibleServe.png" alt="" width="80" height="38" />
      </div>
    </footer>
  </div>
</template>

<script lang="ts">
import { defineComponent, computed } from 'vue'
import LoginForm from './components/login.vue'
import RegisterForm from './components/register.vue'
import { useRoute } from 'vue-router'

export default defineComponent({
  name: 'signIn',
  components: {
    LoginForm,
    RegisterForm,
  },
  setup() {
    const route = useRoute()
    const showLogin = computed(() => {
      return route.params.type === 'login'
    })
    return {
      showLogin,
    }
  },
})
</script>

<style lang="scss" scoped>
.sign-in-page {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url('../../assets/images/sign-in-bg.png');
  background-size: cover;
  background-color: #b8e5f8;
  .sign-in-content {
    height: calc(100% - 142px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    .sign-in-logo {
      height: 81px;
      width: 128px;
      margin: 0 auto 24px;
    }
    ::v-deep(.el-form-item) {
      .el-input__wrapper {
        box-shadow: 0 -1px var(--el-input-border-color, var(--el-border-color)) inset;
        border-radius: unset;
      }
      &.is-error .el-input__wrapper {
        box-shadow: 0 -1px var(--el-color-danger) inset;
      }
    }
  }
  footer {
    font-size: 12px;
    color: #fff;
  }
}
</style>
